<template>
	<div class="base-info-container">
		<h3>基本信息</h3>
		<p class="divider"></p>
		<table>
			<tr>
				<td class="label">业务流水ID：</td>
				<td class="value">{{ info.businessflowId }}</td>
				<td class="label">业务场景名称：</td>
				<td class="value">{{ info.name }}</td>
				<td v-if="isProcessAi" class="label">AI工作流版本号：</td>
				<td v-if="isProcessAi" class="value">{{ info.version }}</td>
			</tr>
			<tr>
				<td class="label">{{ isProcessAi ? '最近受理时间：' : '最近受理时间：' }}</td>
				<td class="value">{{ info.updatedAt }}</td>
				<td class="label">{{ isProcessAi ? '业务状态：' : '业务状态：' }}</td>
				<td class="value" :class="`status-${info.status}`">{{ status[info.status] }}</td>
			</tr>
		</table>
	</div>
</template>

<script>
import { bizStatus } from '../definition';
export default {
	components: {},
	props: {
		info: {
			type: Object,
			default: () => {}
		},
		isProcessAi: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			status: bizStatus // ['待质检', '待补录', '质检通过', '补录中']
		};
	},
	mounted() {},

	methods: {}
};
</script>

<style lang="less" scoped>
.base-info-container {
	color: #333333;

	h3 {
		font-size: 14px;
		font-weight: bold;
		color: #333333;
		line-height: 24px;
	}

	.divider {
		width: 100%;
		height: 1px;
		background: #dedede;
		margin: 10px 0;
	}

	table {
		border-collapse: collapse;
		width: 60%;

		tr {
			height: 30px;
		}
		.label {
			width: 180px;
		}
		.value {
			width: 250px;
		}
	}
	.status-0 {
		color: #676a6c; // 进行中
	}
	.status-1 {
		color: #676a6c; // 待质检
	}
	.status-2 {
		color: #676a6c; // 未完成
	}
	.status-3 {
		color: #ef5753; // 待补录
	}
	.status-4 {
		color: #21db63; // 质检通过
	}
	.status-5 {
		color: #676a6c; // 补录中
	}
}
</style>
